<div class="goods-options z-index-2">
    <ul class="goods-options-list">
        <li class="goods-options-item" v-for="(item, index) in optionsDatas" :key="index">
            <a class="goods-options-item-content" @click="onOptionsItemClick(item, index)">
                <span class="goods-options-item-content-name" :class="{'goods-options-item-content-name-active' : selectOption.id === item.id}">{{item.name}}</span>
                <span class="goods-options-item-content-caret caret" v-if="item.subs.length > 0"
                      :class="[isShowSubContent && selectOption.id === item.id ? 'goods-options-item-content-caret-open' : 'goods-options-item-content-caret-close']"
                ></span>
            </a>
        </li>
    </ul>
    <transition name="fold-height">
        <div class="options-sub-content z-index-2" v-show="isShowSubContent">
            <ul class="options-sub-content-list">
                <li class="options-sub-content-list-item" v-for="(item, index) in selectOption.subs" :key="index" @click="onSubOptionsItemClick(item, index)">
                    <a class="options-sub-content-list-item-content">
                        <span class="options-sub-content-list-item-content-name" :class="{'options-sub-content-list-item-content-name-active' : selectOption.id === item.id}">{{item.name}}</span>
                        <img class="options-sub-content-list-item-content-select" v-show="selectOption.id === item.id" src="@img/options-select.svg" alt="" srcset="">
                    </a>
                </li>
            </ul>
        </div>
    </transition>

    <div class="cover" v-show="isShowSubContent" @click="isShowSubContent = false"></div>
</div>
1、渲染一级菜单
<ul class="goods-options-list">
    <li class="goods-options-item" v-for="(item, index) in optionsDatas" :key="index">
        <a class="goods-options-item-content" @click="onOptionsItemClick(item, index)">
            <span class="goods-options-item-content-name" :class="{'goods-options-item-content-name-active' : selectOption.id === item.id}">{{item.name}}</span>
            <span class="goods-options-item-content-caret caret" v-if="item.subs.length > 0"
                  :class="[isShowSubContent && selectOption.id === item.id ? 'goods-options-item-content-caret-open' : 'goods-options-item-content-caret-close']"
            ></span>
        </a>
    </li>
</ul>